<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        table{
            border: 1px solid gainsboro;
        }

        th,td{
            border: 1px solid gainsboro;
            padding: 8px 16px;
        }

        input{
            width: 50px;
        }
    </style>


</head>
<body>
    <div id="root">
        
        <div v-if="goods.length">
            <input type="button" @click="openAdd" value="添加">
            <table>
                <tr>
                    <th>id</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                
                <tr v-for="item,index in goods">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="handleReduce(index)" :disabled="item.num ===1">-</button>
                        {{item.num}}
                        <button @click="handleAdd(index)">+</button>
                    </td>
                    <td>
                        <button @click="reduce(index)">移除</button>
                    </td>
                </tr>

                <tr v-show="ok" >
                    <td>{{id}}</td>
                    <td><input type="text" v-model="msg1"></td>
                    <td><input type="text" v-model="msg2"></td>
                    <td><input type="text" v-model="msg3"></td>
                    <td>
                        <button @click="add">确认</button>
                    </td>
                </tr>
                
            </table>
            <span>总计:{{totalPrice}}</span>
    
            </div>
            <div v-else>购物车为空</div>
    </div>

    <script>
        var v = new Vue({
            el:"#root",
            data:{
                id:"2",
                msg1:"",
                msg2:"",
                msg3:"",
                ok:false,
                goods:[{id:1,name:"牙刷",price:10,num:1,}],
            },
            methods:{
                openAdd(){
                    this.ok = !this.ok;
                },
                add(){
                    this.goods.push({name:this.msg1,price:this.msg2,num:this.msg3});
                    this.id++;
                },
                reduce(index){
                    this.goods.splice(index,1);
                },
                handleAdd(index){
                    this.goods[index].num++;
                },
                handleReduce(index){
                    this.goods[index].num--;
                }
            },
            computed:{
                totalPrice(){
                var totalPrice = 0;
                for (const key in this.goods) {
                    totalPrice += this.goods[key].price * this.goods[key].num;
                }
                return "总价---" + totalPrice + "元"
            },

            }
 
        })
    </script>
</body>
</html>